<template>
  <div class="home" :style="{ 'min-height': documentClientHeight + 'px' }">
    <div class="top">
      <div class="top_left">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="体质结构" name="tizhi">
            <div>
              <div
                id="main1"
                style="width: 3.0646rem; height: 2.0833rem; margin: 0 auto"
              ></div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="生理结构" name="shengli">
            <div>
              <div
                id="main2"
                style="width: 3.0646rem; height: 2.0833rem; margin: 0 auto"
              ></div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="技能分析" name="jineng">
            <div>
              <div
                id="main3"
                style="width: 3.0646rem; height: 2.0833rem; margin: 0 auto"
              ></div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <el-select v-model="gradeVal" placeholder="全部年级">
          <el-option
            v-for="item in grade"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="top_right">
        <div class="Semicircle_big"></div>
        <div class="Semicircle_small"></div>
        <div class="user">
          <img :src="headImgUrl" alt="" />
          <div>
            {{userName}}
            <span>五年级语文组负责人</span>
          </div>
        </div>
        <div class="other">
          <div @click="$router.push('homework')">
            <img src="../../assets/imgs/icon/icon_sykjckzy.png" alt="" />
            <span>查看作业</span>
          </div>
          <div @click="$router.push('home')">
            <img src="../../assets/imgs/icon/icon_sykjfqhd.png" alt="" />
            <span>发起活动</span>
          </div>
          <div @click="$router.push('healthy')">
            <img src="../../assets/imgs/icon/icon_sykjjkbg.png" alt="" />
            <span>健康报告</span>
          </div>
          <div @click="$router.push('achieventment')">
            <img src="../../assets/imgs/icon/icon_sykjsccj.png" alt="" />
            <span>上传成绩</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 需干预学生个性化方案进度 -->
    <div class="bottomList intervene">
      <div class="intHeader">
        <div class="hLeft">
          <div>
            <img src="../../assets/imgs/icon/icon_symb.png" alt="" />
          </div>
          <span>需干预学生个性化方案进度</span>
        </div>
        <div class="hRight">
          <el-select v-model="unproVal" placeholder="未处理">
            <el-option
              v-for="item in unprocessed"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select v-model="ticeVal" placeholder="体测评价">
            <el-option
              v-for="item in tice"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select v-model="gradeValTwo" placeholder="全部年级">
            <el-option
              v-for="item in gradeTwo"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button>导出PDF文件</el-button>
        </div>
      </div>
      <div class="intBody">
        <el-table stripe :data="tableData" style="width: 100%">
          <el-table-column label="头像" width="120">
            <!-- <template slot-scope="scope"> -->
            <template slot-scope="scope">
              <el-image
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                :key="scope.row.id"
                class="cover-image"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="grade" label="年级" width="150">
          </el-table-column>
          <el-table-column prop="jindu" label="进度" width="150">
          </el-table-column>
          <el-table-column prop="details" label="详情"> </el-table-column>
          <el-table-column
          prop="typecode"
          label="操作"
          :sortable="true"
          :sort-method="sortOpers"
          width="120"
          >
            <template slot-scope="scope">
              <span 
              class="opers"
              :style="scope.row.typecode == 1 ? 'color:#888888;' : 'color:#FE756B;'"
              @click="operatioin(scope.row.id, scope.row.typecode)">
              {{scope.row.typecode == 1 ? '已处理' : '未处理' }}
              </span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 测试项目明细 -->
    <div class="bottomList detailed">
      <div class="detHeader">
        <div class="hLeft">
          <div>
            <img src="../../assets/imgs/icon/icon_sycxmx.png" alt="" />
          </div>
          <span>测试项目明细</span>
        </div>
        <div class="hRight">
          <el-select v-model="proVal" placeholder="肺活量">
            <el-option
              v-for="item in project"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select v-model="achVal" placeholder="优秀">
            <el-option
              v-for="item in achievement"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div id="main4" style="width: 7.9375rem; height: 2.7604rem"></div>
    </div>
    <!-- 需诊断学生名单 -->
    <div class="bottomList diagnosis">
      <!-- 筛选 --- 导出 -->
      <div class="diagHeader">
        <div class="hLeft">
          <div>
            <img src="../../assets/imgs/icon/icon_sycxmx.png" alt="" />
          </div>
          <span>需诊断学生名单</span>
        </div>
        <div class="hRight">
          <el-select v-model="diagScreen" placeholder="全部年级">
            <el-option
              v-for="item in diagGrade"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button>导出PDF文件</el-button>
        </div>
      </div>
      <!-- 内容主体 -->
      <div class="conBody">
        <!-- 多选列表 -->
        <el-table :data="diagTableData" style="width: 100%">
          <el-table-column label="头像" width="120">
            <!-- <template slot-scope="scope"> -->
            <template slot-scope="scope">
              <el-image
                :src="headImgUrl"
                :key="scope.row.id"
                class="cover-image"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="150">
          </el-table-column>
          <el-table-column prop="grade" label="年级"> </el-table-column>
          <el-table-column prop="project" label="项目"> </el-table-column>
          <el-table-column prop="details" label="详情" width="450">
          </el-table-column>
          <el-table-column prop="operation" label="操作"> </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 需制定选课方案学生名单 -->
    <div class="bottomList formulate">
      <!-- 筛选 --- 导出 -->
      <div class="forHeader">
        <div class="hLeft">
          <div>
            <img src="../../assets/imgs/icon/icon_sycxmx.png" alt="" />
          </div>
          <span>需制定选课方案学生名单</span>
        </div>
        <div class="hRight">
          <el-select v-model="forScreen" placeholder="全部年级">
            <el-option
              v-for="item in forGrade"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-button>导出PDF文件</el-button>
        </div>
      </div>
      <!-- 内容主体 -->
      <div class="conBody">
        <!-- 多选列表 -->
        <el-table :data="forTableData" style="width: 100%">
          <el-table-column label="头像" width="120">
            <!-- <template slot-scope="scope"> -->
            <template slot-scope="scope">
              <el-image
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                :key="scope.row.id"
                class="cover-image"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="150">
          </el-table-column>
          <el-table-column prop="grade" label="年级"> </el-table-column>
          <el-table-column prop="project" label="分类"> </el-table-column>
          <el-table-column prop="details" label="详情" width="450">
          </el-table-column>
          <el-table-column prop="operation" label="操作"> </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userName: JSON.parse(sessionStorage.getItem('userMsg')).userName,
      activeName: 'tizhi',
      // 雷达图全部年级
      grade: [{
        value: 'HTML',
        label: 'HTML'
      }, {
        value: 'CSS',
        label: 'CSS'
      }],
      // 干预学生全部年级
      gradeTwo: [{
        value: 'HTML',
        label: 'HTML'
      }, {
        value: 'CSS',
        label: 'CSS'
      }],
      // 干预未处理
      unprocessed: [{
        value: 'HTML',
        label: 'HTML'
      }, {
        value: 'CSS',
        label: 'CSS'
      }],
      // 干预体测
      tice: [{
        value: 'HTML',
        label: 'HTML'
      }, {
        value: 'CSS',
        label: 'CSS'
      }],
      // 明细项目--------------------------
      project: [{
        value: 'HTML',
        label: 'HTML'
      }, {
        value: 'CSS',
        label: 'CSS'
      }],
      // 测试项目明细
      achievement: [{
        value: 'HTML',
        label: 'HTML'
      }, {
        value: 'CSS',
        label: 'CSS'
      }],
      // 雷达图全部年级
      gradeVal: '',
      // 干预学生全部年级
      gradeValTwo: '',
      // 干预未处理
      unproVal: '',
      // 干预体测
      ticeVal: '',
      // 明细测试项目
      proVal: '',
      // 明细成绩
      achVal: '',
      // 需干预学生个性化方案进度表
      tableData: [{
        name: '张三',
        grade: '五年级',
        jindu: '评测阶段',
        details: '体柔韧度不及格，坐位体前屈 12评价',
        typecode: 1
      }, {
        name: '张三',
        grade: '五年级',
        jindu: '评测阶段',
        details: '体柔韧度不及格，坐位体前屈 12评价',
        typecode: 1
      }, {
        name: '张三',
        grade: '五年级',
        jindu: '评测阶段',
        details: '体柔韧度不及格，坐位体前屈 12评价',
        typecode: 0
      }, {
        name: '张三',
        grade: '五年级',
        jindu: '评测阶段',
        details: '体柔韧度不及格，坐位体前屈 12评价',
        typecode: 0
      }, {
        name: '张三',
        grade: '五年级',
        jindu: '评测阶段',
        details: '体柔韧度不及格，坐位体前屈 12评价',
        typecode: 1
      }, {
        name: '张三',
        grade: '五年级',
        jindu: '评测阶段',
        details: '体柔韧度不及格，坐位体前屈 12评价',
        typecode: 1
      }, {
        name: '张三',
        grade: '五年级',
        jindu: '评测阶段',
        details: '体柔韧度不及格，坐位体前屈 12评价',
        typecode: 0
      }, {
        name: '张三',
        grade: '五年级',
        jindu: '评测阶段',
        details: '体柔韧度不及格，坐位体前屈 12评价',
        typecode: 1
      }],
      // 需诊断学生名单-----------------------
      diagScreen: '',
      // 年级
      diagGrade: [],
      // 需诊断学生名单列表
      diagTableData: [],
      // 需制定选课方案学生名单----------------
      forScreen: '',
      // 年级
      forGrade: [],
      // 需制定选课方案学生名单列表
      forTableData: [],
      headImgUrl: ''
    }
  },
  created() {
    this.headImgUrl = JSON.parse(sessionStorage.getItem('userMsg')).headImgUrl
    console.log(this.headImgUrl);
  },
  methods: {
    // 需干预排序
    sortOpers (obj1, obj2) {
      console.log(obj1, obj2);
      let val1 = obj1.typecode
      let val2 = obj2.typecode
      return val1 - val2
    },
    myEcharts1() {
      let myChart = this.$echarts.init(document.getElementById('main1'))
      let option = {
        // title: {
        //     // text: '基础雷达图'
        // },
        title: {
          text: '78%',
          x: 'center',
          y: 'center',
          textStyle: {
            color: '#FFF',
            fontSize: 40,
          }
        },
        tooltip : {
          show: true
        },
        legend: {
          borderWidth: 0
        },
        radar: {
          name: {
            textStyle: {
              color: '#0FDD8D',
              borderRadius: 1,
              padding: [3, 5],
              fontSize: 16
            }
          },
          indicator: [
            { name: '66% 重度肺活量低下', id: "1", max: 10 },
            { name: '12% 肥胖', max: 10 },
            { name: '8% 重度视力低下', max: 10 }
          ],
          triggerEvent: true,
          axisLine: {
            lineStyle: {
              color: 'rgba(155, 234, 213, 1)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(55, 213, 171, 1)',
              width: 1
            }
          },
          splitNumber: 3
        },
        series: [{
          name: '体质结构数据详情',
          type: 'radar',
          symbol: "none", // 去除边框拐角点
          data: [
            {
              value: [9, 4, 8],
              areaStyle: {
                opacity: 1,
                color: new echarts.graphic.RadialGradient(1, 1, 1, [
                  {
                    color: '#38D5AB',
                    offset: 0
                  },
                  {
                    color: '#C2FF85',
                    offset: 1
                  }
                ]),
              },
              lineStyle: {
                width: 0
              }
            }
          ]
        }]
      }
      myChart.on('click', function (params) {
        console.log(params)
        if (params.name == "研发") {
          alert("aaa")
        }
      })
      myChart.setOption(option)
    },
    myEcharts2() {
      let myChart = this.$echarts.init(document.getElementById('main2'))
      let option = {
        // title: {
        //     // text: '基础雷达图'
        // },
        title: {
          text: '78%',
          x: 'center',
          y: 'center',
          textStyle: {
            color: '#FFF',
            fontSize: 40,
          }
        },
        tooltip : {
          show: true
        },
        legend: {
          borderWidth: 0
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#0FDD8D',
              borderRadius: 1,
              padding: [3, 5],
              fontSize: 16
            }
          },
          indicator: [
            { name: '66% 重度肺活量低下', max: 10 },
            { name: '12% 肥胖', max: 10 },
            { name: '8% 重度视力低下', max: 10 }
          ],
          triggerEvent: true,
          axisLine: {
            lineStyle: {
              color: 'rgba(155, 234, 213, 1)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(55, 213, 171, 1)',
              width: 1
            }
          },
          splitNumber: 3
        },
        series: [{
          name: '生理结构数据详情',
          type: 'radar',
          symbol: "none", // 去除边框拐角点
          data: [
            {
              value: [9, 4, 8],
              areaStyle: {
                opacity: 1,
                color: new echarts.graphic.RadialGradient(1, 1, 1, [
                  {
                    color: '#38D5AB',
                    offset: 0
                  },
                  {
                    color: '#C2FF85',
                    offset: 1
                  }
                ]),
              },
              lineStyle: {
                width: 0
              }
            }
          ]
        }]
      }
      myChart.on('click', function (params) {
        console.log(params)
        if (params.name == "研发") {
          alert("aaa")
        }
      })
      myChart.setOption(option)
    },
    myEcharts3() {
      let myChart = this.$echarts.init(document.getElementById('main3'))
      let option = {
        // title: {
        //     // text: '基础雷达图'
        // },
        title: {
          text: '78%',
          x: 'center',
          y: 'center',
          textStyle: {
            color: '#FFF',
            fontSize: 40,
          }
        },
        tooltip : {
          show: true
        },
        legend: {
          borderWidth: 0
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#0FDD8D',
              borderRadius: 1,
              padding: [3, 5],
              fontSize: 16
            }
          },
          indicator: [
            { name: '66% 重度肺活量低下', max: 10 },
            { name: '12% 肥胖', max: 10 },
            { name: '8% 重度视力低下', max: 10 }
          ],
          triggerEvent: true,
          axisLine: {
            lineStyle: {
              color: 'rgba(155, 234, 213, 1)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(55, 213, 171, 1)',
              width: 1
            }
          },
          splitNumber: 3
        },
        series: [{
          name: '技能分析数据详情',
          type: 'radar',
          symbol: "none", // 去除边框拐角点
          data: [
            {
              value: [9, 4, 8],
              areaStyle: {
                opacity: 1,
                color: new echarts.graphic.RadialGradient(1, 1, 1, [
                  {
                    color: '#38D5AB',
                    offset: 0
                  },
                  {
                    color: '#C2FF85',
                    offset: 1
                  }
                ]),
              },
              lineStyle: {
                width: 0
              }
            }
          ]
        }]
      }
      myChart.on('click', function (params) {
        console.log(params)
        if (params.name == "研发") {
          alert("aaa")
        }
      })
      myChart.setOption(option)
    },
    Histogram() {
      let myChart = this.$echartsd.init(document.getElementById('main4'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['优秀', '良好', '及格', '不及格', '缺考'],
          type: 'scroll',
          right: '15%',
          top: '50%',
          orient: 'vertical'
        },
        color: ['#0FDD8D', '#7AEEEE', '#A7F7D2', '#FDE08C', '#61686C'],
        grid: {
          left: '3%',
          right: '30%',
          bottom: '20%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            offset: 4,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            data: [
              '一年级',
              '二年级',
              '三年级',
              '四年级',
              '五年级',
              '六年级',
              '七年级',
              '八年级',
              '九年级',
              '十年级',
              '十一年级',
              '十二年级']
          }
        ],
        yAxis: [
          {
            type: 'value',
            // min: 10,
            axisLine: {
              show: false,
              lineStyle: {
                color: "#888888",
                type: 'dashed'
              }
            }
          }
        ],
        series: [
          {
            name: '优秀',
            type: 'bar',
            barWidth: 25,
            stack: '搜索引擎',
            data: [620, 732, 701, 734, 1090, 1130, 1120, 732, 701, 734, 190, 130]
          },
          {
            name: '良好',
            type: 'bar',
            stack: '搜索引擎',
            data: [120, 132, 101, 134, 290, 230, 220, 732, 701, 734, 190, 130]
          },
          {
            name: '及格',
            type: 'bar',
            stack: '搜索引擎',
            data: [60, 72, 71, 74, 190, 130, 110, 532, 201, 734, 190, 130]
          },
          {
            name: '不及格',
            type: 'bar',
            stack: '搜索引擎',
            data: [62, 82, 91, 84, 109, 110, 120, 432, 201, 734, 190, 130]
          },
          {
            name: '缺考',
            type: 'bar',
            stack: '搜索引擎',
            data: [62, 82, 91, 84, 109, 110, 120, 320, 501, 734, 190, 130]
          }
        ]
      };
      myChart.setOption(option)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 需干预学生的操作
    operatioin(id, typecode) {
      if (this.typecode == 0) {
        // 操作不及格
        this.typecode = ''
        this.$router.push({ path: `/fail`, query: { id } })
      } else {
        this.typecode = ''
      }
    },
    // 操作不及格
    changeFail(id) {
      if (this.operVal === '2') {
        // 操作不及格
        this.operVal = ''
      } else {
        this.operVal = ''
      }
    },
  },
  computed: {
    documentClientHeight: {
      get() { return this.$store.state.common.documentClientHeight },
      set(val) { this.$store.commit('common/updateDocumentClientHeight', val) }
    }
  },
  mounted() {
    this.$nextTick(function () {
      this.myEcharts1()
      this.myEcharts2()
      this.myEcharts3()
      this.Histogram()
    })

  }
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  .top {
    display: flex;
    .top_left {
      width: 3.8958rem;
      height: 2.4479rem;
      background-color: #fff;
      margin-right: 0.1354rem;
      border-radius: 0.0781rem;
      padding: 0 0.1302rem;
      position: relative;
      .el-select {
        position: absolute;
        top: 2.4%;
        right: 0.1302rem;
      }
      /deep/.el-select > .el-input--medium > .el-input__inner,
      /deep/.el-input .el-input__count .el-input__count-inner {
        background-color: #f7fbfc;
        line-height: 0.2188rem;
        width: 0.7396rem;
        height: 0.2188rem;
        border-radius: 0.0521rem;
      }
    }
    .top_right {
      width: 3.8958rem;
      height: 2.4479rem;
      background-color: #fff;
      border-radius: 0.0781rem;
      position: relative;
      .Semicircle_big {
        right: 0;
        top: 0;
        position: absolute;
        width: 2.7656rem;
        height: 1.2969rem;
        background: linear-gradient(
          316deg,
          #3db0f1 0%,
          rgba(138, 255, 225, 0.62) 100%
        );
        opacity: 0.08;
        border-radius: 0 0 2.7656rem 2.7656rem;
        filter: blur(0.0208rem);
      }
      .Semicircle_small {
        position: absolute;
        top: 0;
        right: 0;
        width: 1.401rem;
        height: 1.401rem;
        background: linear-gradient(
          320deg,
          #38d5ab 0%,
          rgba(194, 255, 133, 0) 100%
        );
        opacity: 0.15;
        border-radius: 0 0 0 1.401rem;
      }
      .user {
        margin: 0.4792rem 0 0 0.3281rem;
        img {
          width: 0.5208rem;
          height: 0.5208rem;
          border-radius: 0.2604rem;
          float: left;
        }
        div {
          float: left;
          font-size: 0.1875rem;
          font-weight: 400;
          color: #525252;
          line-height: 0.2604rem;
          margin: 0.099rem 0 0 0.1354rem;
          span {
            font-size: 0.0729rem;
            font-weight: 400;
            color: #888888;
            line-height: 0.1042rem;
            display: block;
          }
        }
      }
      .other {
        margin-top: 1.7292rem;
        display: flex;
        justify-content: space-around;
        div {
          display: flex;
          flex-direction: column;
          &:hover {
            cursor: pointer;
          }
          span {
            margin-top: 0.0781rem;
            font-size: 0.0729rem;
            font-weight: 400;
            color: #888888;
            line-height: 0.1042rem;
          }
        }
      }
    }
  }
  .bottomList {
    width: 7.9375rem;
    background: #ffffff;
    border-radius: 0.0781rem;
    margin-top: 0.1302rem;
  }
  // 需干预学生个性化方案进度
  .intervene {
    width: 100%;
    line-height: 0.2188rem;
    padding-bottom: 0.1354rem;
    .intHeader {
      display: flex;
      justify-content: space-between;
      padding: 0.1302rem 0.1458rem 0;
      .hLeft {
        display: flex;
        flex-direction: middle;
        div {
          img {
            width: 0.125rem;
            height: 0.125rem;
          }
        }
        span {
          font-size: 0.0938rem;
          font-weight: 600;
          color: #525252;
        }
      }
      .hRight {
        display: flex;
        flex-direction: middle;
        /deep/.el-input--medium .el-input__inner,
        .el-input--suffix .el-input__inner,
        .el-select .el-input__inner {
          background-color: #f7fbfc;
          height: 0.2188rem;
          width: 0.7396rem;
          border-radius: 0.0521rem;
        }
        .el-select {
          margin-right: 0.1042rem;
        }
        .el-button {
          width: 0.7396rem;
          height: 0.2188rem;
          background: #0fdd8d;
          border-radius: 0.0521rem;
          font-size: 0.0833rem;
          font-weight: 500;
          color: #ffffff;
          line-height: 0.1146rem;
          padding: 0;
        }
      }
    }
    .intBody {
      padding: 0.1302rem 0.1458rem 0;
      .opers:hover {
          cursor: pointer;
      }
      .el-image {
        width: 0.25rem;
        height: 0.25rem;
        border-radius: 0.125rem;
      }
    }
  }
  // 测试项目明细
  .detailed {
    width: 100%;
    .detHeader {
      display: flex;
      justify-content: space-between;
      padding: 0.1302rem 0.1458rem 0;
      position: relative;
      .hLeft {
        display: flex;
        flex-direction: middle;
        div {
          img {
            width: 0.125rem;
            height: 0.125rem;
          }
        }
        span {
          font-size: 0.0938rem;
          font-weight: 600;
          color: #525252;
        }
      }
      .hRight {
        display: flex;
        flex-direction: middle;
        position: absolute;
        right: 0.1458rem;
        /deep/.el-input--medium .el-input__inner,
        .el-input--suffix .el-input__inner,
        .el-select .el-input__inner {
          background-color: #f7fbfc;
          height: 0.2188rem;
          width: 0.7396rem;
          border-radius: 0.0521rem;
        }
        .el-select {
          margin-left: 0.1042rem;
        }
      }
    }
  }
  // 需诊断学生名单
  .diagnosis {
    width: 100%;
    padding: 0.1771rem 0.1458rem;
    position: relative;
    .diagHeader {
      display: flex;
      justify-content: space-between;
      padding: 0 0 0.1302rem;
      .hLeft {
        display: flex;
        flex-direction: middle;
        div {
          img {
            width: 0.125rem;
            height: 0.125rem;
          }
        }
        span {
          font-size: 0.0938rem;
          font-weight: 600;
          color: #525252;
        }
      }
      .hRight {
        display: flex;
        flex-direction: middle;
        /deep/.el-input--medium .el-input__inner,
        .el-input--suffix .el-input__inner,
        .el-select .el-input__inner {
          background-color: #f7fbfc;
          height: 0.2188rem;
          width: 0.7396rem;
          border-radius: 0.0521rem;
        }
        .el-select {
          margin-right: 0.1042rem;
        }
        .el-button {
          width: 0.7396rem;
          height: 0.2188rem;
          background: #0fdd8d;
          border-radius: 0.0521rem;
          font-size: 0.0833rem;
          font-weight: 500;
          color: #ffffff;
          line-height: 0.1146rem;
          padding: 0;
        }
      }
    }
    // 内容区
    .conBody {
      .el-table {
        /deep/.el-input--medium .el-input__inner,
        .el-input--suffix .el-input__inner,
        .el-select .el-input__inner {
          width: 0.4479rem;
          height: 0.1875rem;
          background: #f8f8f8;
          border-radius: 0.0938rem;
          padding: 0 0.1042rem 0 0.1302rem;
          color: #888888;
        }
        /deep/.el-input__suffix {
          display: none;
        }
      }
    }
  }
  // 需制定选课方案学生名单
  .formulate {
    width: 100%;
    padding: 0.1771rem 0.1458rem;
    position: relative;
    .forHeader {
      display: flex;
      justify-content: space-between;
      padding: 0 0 0.1302rem;
      .hLeft {
        display: flex;
        flex-direction: middle;
        div {
          img {
            width: 0.125rem;
            height: 0.125rem;
          }
        }
        span {
          font-size: 0.0938rem;
          font-weight: 600;
          color: #525252;
        }
      }
      .hRight {
        display: flex;
        flex-direction: middle;
        /deep/.el-input--medium .el-input__inner,
        .el-input--suffix .el-input__inner,
        .el-select .el-input__inner {
          background-color: #f7fbfc;
          height: 0.2188rem;
          width: 0.7396rem;
          border-radius: 0.0521rem;
        }
        .el-select {
          margin-right: 0.1042rem;
        }
        .el-button {
          width: 0.7396rem;
          height: 0.2188rem;
          background: #0fdd8d;
          border-radius: 0.0521rem;
          font-size: 0.0833rem;
          font-weight: 500;
          color: #ffffff;
          line-height: 0.1146rem;
          padding: 0;
        }
      }
    }
    // 内容区
    .conBody {
      .el-table {
        /deep/.el-input--medium .el-input__inner,
        .el-input--suffix .el-input__inner,
        .el-select .el-input__inner {
          width: 0.4479rem;
          height: 0.1875rem;
          background: #f8f8f8;
          border-radius: 0.0938rem;
          padding: 0 0.1042rem 0 0.1302rem;
          color: #888888;
        }
        /deep/.el-input__suffix {
          display: none;
        }
      }
    }
  }
}

// 标签页
.el-tabs {
  /deep/.el-tabs__item.is-active {
    color: #0fdd8d;
    border-bottom: 2px solid #0fdd8d;
  }
  /deep/.el-tabs__item:hover {
    color: #0fdd8d;
  }
  /deep/.el-tabs__item {
    color: #888888;
    font-size: 0.0938rem;
    height: 0.3646rem;
    line-height: 0.3646rem;
    margin: 0 0.2656rem;
  }
}
// 下拉框箭头
/deep/.el-select .el-input__suffix .el-icon-arrow-up {
  line-height: 0.2188rem;
}
</style>
